<script lang="ts" setup>
import { ElMessage, ElNotification } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import { reqLogin, reqUserInfo } from '@/api/user';
import { useCourseStore } from '@/stores/course';
import { getCourseList } from '@/api/course';
import { useUserStore } from '@/stores/user';
import { usePointStore } from '@/stores/point';
// 控制加载
let loading = ref(false)
// 引入路由器
const router = useRouter()

// 表单校验用绑定dom
let loginForms = ref();

// 表单校验需要的配置对象
const rules = {
    username: [{ required: true, message: "用户名不能为空", trigger: "change" }],
    password: [{ required: true, message: "密码不能为空", trigger: "change" }]
}

const useStore = useUserStore();
// 表单数据用
let loginData = reactive({ username: "rain", password: "888888" })
const login = async () => {
    try {
        // 表单校验通过才能发请求
        await loginForms.value.validate();
        // 开始加载
        loading.value = true;
        let result: any = await reqLogin(loginData);
        if (result.data) {
            // 将token存入仓库
            // useStore.userLogin(result.data as string);
            useTokenStore().setToken(result.data as string);
            console.log(useTokenStore().token);
            getUserInfo();
            getTagDate();
            getTableDate();
        }
        router.replace('/layout');//跳转到主页
        ElNotification({
            type: "success",
            message: "登陆成功"
        });
    } catch (error) {
        console.log(error);
    } finally {
        loading.value = false;
    }
}

// 获取用户信息getUserInfo方法
const CourseStore = useCourseStore();
const getUserInfo = async () => {
    let result = await reqUserInfo();
    //存入仓库中
    useStore.setUserInfo(result.data);
    if (useStore.userInfo) {
        let resultCourse = await getCourseList();
        if (resultCourse) {
            CourseStore.setCourseInfo(resultCourse.data);
        } else {
            ElMessage.error("课程信息获取失败");
        }
    } else {
        console.log("用户信息没存入");
    }
}
//获取标签数据
import { getTag, getPoint } from '@/api/point';
import { useTokenStore } from '@/stores/token';
const pointStore = usePointStore();
const getTagDate = async () => {
    const tagList = await getTag();
    pointStore.setTag(tagList.data);
    console.log("标签属性", pointStore.tag);
}
const getTableDate = async () => {
    const res = await getPoint();
    usePointStore().setPoint(res.data);
}
const Tologin = () => {
    router.push({
        name: 'login'
    })
}
</script>
<template>
    <div class="login_con">
        <div class="login_body">
            <h1 class="website-title">基于知识点融合教学网站<span style="color:bisque">教师端</span></h1>
            <el-form class="login_form" :model="loginData" :rules="rules" ref="loginForms">
                <el-form-item prop="username">
                    <el-input :prefix-icon="User" v-model="loginData.username" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password" style="margin-top: 20px;">
                    <el-input type="password" :prefix-icon="Lock" v-model="loginData.password" show-password
                        placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" type="primary" @click="login" style="width: 100%;">登录</el-button>
                </el-form-item>
                <div style="display: flex;justify-content: space-between;font-size: 14px;">
                    <span style="color: white;">不是教师？这里<span @click="Tologin"
                            style="color:#409eff;cursor: pointer;">登录</span></span>
                </div>

            </el-form>
        </div>
    </div>
</template>

<style scoped>
.login_con {
    background-image: url('http://localhost:8080/course/download/login.jpg');
    /* background-size: cover; */
    background-size: 100% 100%;
    /* 背景图适应并填充整个容器 */
    width: 100%;
    height: 100vh;
    display: flex;
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
}

.login_body {
    background-color: rgba(0, 0, 0, 0.5);
    width: 45%;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.website-title {
    color: white;
    font-size: 24px;
    margin-bottom: 20px;

}

.login_form {
    width: 50%;
    padding: 20px;
}
</style>
